import "@antv/x6-vue-shape";
import { Graph, Shape, Addon, FunctionExt } from "@antv/x6";
// 拖拽生成四边形或者圆形
export const startDragToGraph = (graph, type, e, item) => {
  const node =
    type === "server"
      ? graph.createNode({
          width: 150,
          height: 80,
          shape: "html",
          html() {
            const wrap = document.createElement("div");
            const img = document.createElement("img");
            const errtip = document.createElement("div");
            errtip.style.color = "red";
            errtip.style.textAlign = "right";
            errtip.style.background =
              "linear-gradient(to right, rgba(255, 255, 255), rgba(255, 205, 205))";
            errtip.innerText = item.abnormalCount + "项异常>";
            img.width = 30;
            img.height = 30;
            img.src = item.icon;
            wrap.style.width = "100%";
            wrap.style.height = "100%";
            wrap.style.padding = "5px";
            wrap.style.background = "#fff";
            wrap.innerText = `${item.name}\n${item.ip}`;
            wrap.style.borderLeft = `5px solid ${
              item.status === "normal" ? "green" : "red"
            }`;
            wrap.appendChild(img);
            item.status !== "normal" ? wrap.appendChild(errtip) : "";
            return wrap;
          },
          ports: ports
        })
      : type === "database"
      ? graph.createNode({
          shape: "ellipse",
          width: 100,
          height: 100,
          attrs: {
            label: {
              text: "圆形节点",
              fill: "#000000",
              fontSize: 14,
              textWrap: {
                width: -20,
                height: -10,
                ellipsis: true
              }
            },
            body: {
              stroke: "#000000",
              strokeWidth: 1,
              fill: "#ffffff"
            }
          },
          ports: ports
        })
      : graph.createNode({
          shape: "polygon",
          x: 40,
          y: 40,
          width: 120,
          height: 120,
          attrs: {
            label: {
              text: "条件节点",
              fill: "#000000",
              fontSize: 14,
              textWrap: {
                width: -50,
                height: "70%",
                ellipsis: true
              }
            },
            body: {
              fill: "#ffffff",
              stroke: "#000000",
              refPoints: "0,10 10,0 20,10 10,20",
              strokeWidth: 1
            }
          },
          ports: ports
        });
  const dnd = new Addon.Dnd({ target: graph });
  dnd.start(node, e);
};
const ports = {
  groups: {
    // 输入链接桩群组定义
    top: {
      position: "top",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#2D8CF0",
          strokeWidth: 2,
          fill: "#fff"
        }
      }
    },
    // 输出链接桩群组定义
    bottom: {
      position: "bottom",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#2D8CF0",
          strokeWidth: 2,
          fill: "#fff"
        }
      }
    },
    left: {
      position: "left",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#2D8CF0",
          strokeWidth: 2,
          fill: "#fff"
        }
      }
    },
    right: {
      position: "right",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#2D8CF0",
          strokeWidth: 2,
          fill: "#fff"
        }
      }
    }
  },
  items: [
    {
      id: "port1",
      group: "top"
    },
    {
      id: "port2",
      group: "bottom"
    },
    {
      id: "port3",
      group: "left"
    },
    {
      id: "port4",
      group: "right"
    }
  ]
};
